.container {
  @rd: 360deg;
  display: grid;
  /* 4x4 网格 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: 
    'A A A B'
    'D a b B'
    'D d c B'
    'D C C C'
  ;
  gap: 8px;

  .createKeyframes(parent, @rd);
  animation: parent 10s infinite linear;

  width: 500px;
  height: 500px;
  margin: 200px auto;
  

  .grid_item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 2px solid black;

    @list: A B C D a b c d;
    each(@list, { // @value, @key, @index
      &:nth-child(@{index}) {
        grid-area: @value;
      }
    })

    img {
      // @rd: -360deg;
      width: 350%;
      height: 350%;
      object-fit: cover; /*避免图片失去比例*/

      .createKeyframes();
      animation: children 10s infinite linear;
    }
  }
  .createKeyframes(@name: children, @rd: -360deg) {
    @keyframes @name {
      to {
        transform: rotate(@rd);
      }
    }
  }
}